<template xmlns="http://www.w3.org/1999/html">
  <div  v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
    <div v-if="!hasMessage">
      这边空空如也ε=(´ο｀*)))唉
    </div>
    <template>
      <el-card class="box-card"
               v-for="(message,index) of wallMessage"
               v-if="hasMessage">
        <div slot="header" class="clearfix">
          <span>标题：{{ message.message_title }}</span>
          <span style="margin-left: 40px"><i class="el-icon-timer" style="margin-right: 3px"/>{{ message.message_time }}</span>
          <span style="margin-left: 40px"><i style="margin-right: 3px"
                                             class="el-icon-user-solid"/>{{ message.message_userName }}</span>
          <span style="margin-left: 40px"><i class="el-icon-location-outline"
                                             style="margin-right: 3px"/>{{ message.message_address }}</span>
        </div>
        <div>
          <span style="padding: 2px 4px;word-wrap:break-word;line-height: 25px;font-size: 20px">{{
              message.message_content
            }}</span>


          <el-button style="float: right;margin-top: 5px" type="text"
                     @click="open(message.message_id)"
                     class="el-icon-s-comment">评论
          </el-button>
          <el-button style="float: right;margin-top: 5px;margin-right: 30px"
                     type="text"
                     class="el-icon-s-flag"
                     @click="up(message.message_id)">点赞
          </el-button>
          <el-button style="float: right;margin-top: 5px;margin-right: 30px"
                     type="text"
                     class="el-icon-success">点赞数{{message.message_upNum}}
          </el-button>
          <el-collapse style="margin-top: 10px"
                       accordion
                       v-model="CommentCollapse"
                       @change="getComment">
            <el-collapse-item :name="message.message_id">
              <template slot="title">
                <el-button style="float: right; padding: 3px 0;" type="text">查看评论<i class="el-icon-more"/></el-button>
              </template>

              <el-card style="background-color: #8cc5ff" class="box-card" :user=user v-for="(comment) of comments"
                       :key="comment.comment_id"
                       v-if="commentsLen>0">
                <div slot="header" class="clearfix">
                  <span><i class="el-icon-timer" style="margin-right: 3px"/>{{ comment.comment_time }}</span>
                  <span style="margin-left: 40px"><i style="margin-right: 3px"
                                                     class="el-icon-user-solid"/>{{ comment.comment_userName }}</span>
                  {{ comment.userId }}
                  <el-button style="float: right;color: white; padding: 3px 0" type="text"
                             @click="deleteMyComment(comment.comment_id)"
                             v-show="user.user_id === comment.comment_userId">删除自己的评论
                  </el-button>
                </div>
                <div class="text item">
                  {{ comment.comment_content }}

                </div>
              </el-card>
              <el-card class="box-card" v-if="commentsLen == 0">
                <div class="text item">
                  <span style="text-align: center;margin: 2px auto;padding: 2px">这里啥也没留下ε=(´ο｀*)))唉</span>

                </div>
              </el-card>


            </el-collapse-item>
          </el-collapse>

        </div>
      </el-card>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :pagesize="sizeNum"
          @current-change="getCurrentPageNum">
      </el-pagination>
    </template>




  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      pageNum: 1,
      sizeNum: 6,
      total: 100,
      wallMessage: {},
      CommentCollapse: "1",
      comments: {},
      commentsLen: 0,
      user: "",
      isLogin:true,
      hasMessage:'',
      currentComment:'',
      loading:true
    }
  },
  methods: {
    getCurrentPageNum(num) {
      this.pageNum = num;

      this.getRequest(this.$store.state.baseUrl+"/message/findAllIs", {
        pageNum: (this.pageNum + ""),
        sizeNum: (this.sizeNum + "")

      }).then(resp => {
        if (resp) {
          this.wallMessage = resp.obj.allMessage;

        }
      })

    },

    getComment(val) {
      this.currentComment = val;
      this.getRequest(this.$store.state.baseUrl+'/comment/findCommentToMessage', {
        message_id: val
      }).then(resp => {
        if (resp) {
          console.log(resp.obj)
          this.comments = resp.obj;

          this.commentsLen = resp.obj.length;
        }
      })
    },
    open(message_id) {
      if(this.beforeOperate()){
        this.$prompt('请输入评论', '提示', {
          confirmButtonText: '发送  ',
          cancelButtonText: '取消',
          inputErrorMessage: '评论格式不正确'
        }).then(({value}) => {
          this.postRequest(this.$store.state.baseUrl+'/comment/addComment', {
            comment_content: value,
            message_id: message_id,
            comment_userId: this.user.user_id,
            comment_userName: this.user.username
          }).then(resp => {
            this.$message({
              type: 'success',
              message: "评论成功"
            });
            this.getComment(this.currentComment);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消评论'
          });
        });
      }else {
        this.$message("请先登录");
        this.$router.push("/userLogin")
      }
    },

    deleteMyComment(comment_id) {
      if(this.beforeOperate()){
        this.$confirm('是否删除该评论?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest(this.$store.state.baseUrl+'/comment/deleteMyComment', {
            comment_id: comment_id,
            user_id: this.user.user_id
          }).then(resp => {
            this.$message({
              type: 'success',
              message: "删除成功"
            });
            this.getComment(this.currentComment);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }else {
        this.$message("请先登录");
        this.$router.push("/userLogin")
      }

    },
    up(message_id){
      if(this.beforeOperate()){
        this.putRequest(this.$store.state.baseUrl+'/message/addUpNum',{
          message_id:message_id
        }).then(resp => {
          this.$message({
            type:'success',
            message:'点赞成功'
          });
          this.getMessage();
        })
      }else {
        this.$message("请先登录");
        this.$router.push("/userLogin")
      }
    },
    getMessage(){
      this.getRequest(this.$store.state.baseUrl+"/message/findAllIs", {
        pageNum: (this.pageNum + ""),
        sizeNum: (this.sizeNum + "")

      }).then(resp => {
        if (resp) {
          this.hasMessage = (resp.obj.allMessage.length > 0);
          this.wallMessage = resp.obj.allMessage;
          this.total = parseInt(resp.obj.pagesNum) * 10;
          this.loading = false;
        }
      });
    }

  },
  mounted() {
    this.getMessage();
    this.user = JSON.parse(window.sessionStorage.getItem("user"));

  },
  computed: {
    isMineComment(user_id) {
      return user_id == this.user.user_id;
    }
  }

}
</script>

<style scoped>
.box-card {
  margin-bottom: 10px;

}
</style>
